<template>
  <div>
    <t-dialog
      v-model:visible="innerVisible"
      @confirm="onClose"
      @cancel="onClose"
      @close="onClose"
      close-btn
      :showOverlay="true"
    >
      <div class="download-infor">
        <div class="ge"></div>
        <t-image
          class="image-container"
          :style="{
            width: '75px',
            height: '75px',
            boxShadow: '0 4px 4px 0 rgba(0, 0, 0, 0.1)',
            border: '1px solid rgba(0, 0, 0, 0.1)',
            marginBottom: '20px',
            borderRadius: '18.75px',
          }"
          fit="fill"
          :src="logo"
        ></t-image>
        <t-image
          class="image-container"
          :style="{ width: '125px', height: '46px' }"
          fit="fill"
          :src="logoText"
        ></t-image>
        <div class="tishi">
          <p>只能阅读第一章节</p>
          <p>下载APP免费阅读所有章节</p>
        </div>
        <!-- <a href="https://manhuaf.s3.ap-southeast-1.amazonaws.com/prod/app/gsmh.apk" class="btn">
					<p>急速安装</p>
				</a> -->
        <div class="btn" @click="getDownload">
          <p>急速安装</p>
        </div>
      </div>
    </t-dialog>
  </div>
</template>

<script setup>
import { onMounted, ref, reactive, watch } from "vue";
import { useRouter } from "vue-router";
import { Message } from "tdesign-mobile-vue";
import logo from "/src/assets/logo-bai.png";
import logoText from "/src/assets/logo-text.png";
import header from "/src/assets/header.png";

const props = defineProps({
  isShowDialog: {
    type: Boolean,
    default: false,
  },
});

const innerVisible = ref(props.isShowDialog);
// 声明自定义事件，用于通知父组件关闭
const emit = defineEmits(["update:isShowDialog"]);

const getDownload = () => {
  const storedCode = localStorage.getItem("cartoonInviteCode");
  // 基础链接
  const baseUrl = "http://52.74.47.75:91/"; //正式
  // const baseUrl = 'http://47.104.140.61:91/';//测试
  const urlWithCode = `${baseUrl}?code=${encodeURIComponent(storedCode)}`;
  // 打开外部链接
  window.open(urlWithCode, "_blank"); // _blank表示在新窗口打开
};

// 监听父组件传递的 isShowDialog 变化，同步到内部状态
watch(
  () => props.isShowDialog,
  (newVal) => {
    innerVisible.value = newVal; // 父组件控制显示时，内部状态同步更新
  }
);

// 弹窗关闭时，同步更新内部状态和父组件状态
const onClose = () => {
  innerVisible.value = false; // 关闭内部弹窗
  emit("update:isShowDialog", false); // 通知父组件关闭
};
</script>

<style scoped lang="scss">
p {
  margin: 0;
}
.download-infor {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  // margin-top: 65px;
  .ge {
    width: 100%;
    height: 105px;
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0) 0%,
      /* 顶部完全透明 */ rgba(255, 255, 255, 0.2) 5%,
      rgba(255, 255, 255, 0.3) 60%,
      rgba(255, 255, 255, 0.5) 75%,
      rgba(255, 255, 255, 0.9) 80%,
      rgba(255, 255, 255, 1) 85%,
      /* 30% 处半透明（30% 白色） */ rgba(255, 255, 255, 1) 100%
        /* 底部完全白色 */
    );
  }
}
.header-text {
  margin-top: 10px;
  h4 {
    font-size: 20px;
    color: #303133;
    letter-spacing: 4px;
    margin: 0;
  }
  p {
    font-size: 8px;
    color: #909199;
    margin: 0;
  }
}
.tishi {
  margin: 20px 0;
  margin-bottom: 0;
  line-height: 28px;
  color: #303133;
  font-size: 16px;
  font-weight: 550;
}
.btn {
  margin-top: 30px;
  background-color: #000000;
  width: calc(100% - 40px);
  height: 50px;
  line-height: 50px;
  color: #fff;
  border-radius: 15px;
  font-size: 20px;
  font-weight: 700;
  text-decoration: none;
}
.image-header {
  position: relative;
}
// .t-dialog__content{
// 	background-image: url('../assets/header.png');
// 	background-repeat: no-repeat;

// }
// 关键修改：修正图片路径 + 精准定位对话框容器
:deep(.full-bg-dialog .t-dialog__container) {
  /* 使用正确的图片路径（src/assets下的图片需用 ~@ 开头） */
  background-image: url("@/assets/header.png") !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important; /* 覆盖整个对话框 */
  background-position: center !important;
  border-radius: 8px;
  padding-top: 20px; /* 顶部内边距，避免内容紧贴顶部 */
}

// 隐藏对话框默认的头部和底部边框（可选）
:deep(.full-bg-dialog .t-dialog__header),
:deep(.full-bg-dialog .t-dialog__footer) {
  display: none;
}
</style>
